<script setup>
    import { nextTick, ref,} from 'vue'
    import { Autoplay, Pagination, Navigation, Mousewheel } from 'swiper/modules'
    import { swiperAnimateCache,  swiperAnimate, clearSwiperAnimate } from '@/utils/animate'
    import { useScreenSize } from '@/utils/hooks/useScreenSize'

    // 图片引入
    import bg01 from '@/assets/images/p_01.jpg'
    import bg02 from '@/assets/images/p_02.jpg'
    import bg03 from '@/assets/images/p_03.jpg'

    // 轮播方法
    const modules = [Autoplay, Pagination, Navigation, Mousewheel]

    // 轮播初始化
    const onSwiper = (e) => {
        nextTick(()=>{
            swiperAnimateCache() 
            swiperAnimate(e) 
        })
    };
    // 轮播切换方法触发动画
    const onSlideChange = (e) => {
        nextTick(()=>{
          clearSwiperAnimate()
          swiperAnimate(e) 
        })
        
    };
    // 获取屏幕高度
    const { screenH } = useScreenSize()


</script>
<template>
    <div class="home">
        <!-- swiper 中 style 里的height必须写，否则圆点位置不对, height属性也要写, 否则第一页动画会没有且页面会报错 
              height:screenH + 'px'-->
        <swiper 
            :style="{
              '--swiper-navigation-color': '#fff',
              '--swiper-pagination-color': '#fff',
            }"
            :direction="'vertical'"
            :mousewheel="true"
            :pagination="{
                clickable: true,
            }"
            :height="screenH"
            :slides-per-view="1"
            :modules="modules" 
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            class="homeSwiper">
            <swiper-slide>
                <div class="home-con">
                    <img class="slide-bg" :src="bg01">
                    <div class="home-txt flex align-c flex-v">
                        <h4
                            class="animation"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="1s">
                            Section One
                        </h4>
                        <p 
                            class="animation"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="1s">
                            For everything there is a season,and a time for every matter under heaven.
                        </p>
                    </div>                    
                </div>                
            </swiper-slide>
            <swiper-slide>
                <div class="home-con">
                    <img class="slide-bg" :src="bg02"> 
                    <div class="home-txt flex align-c flex-v">
                        <h4
                            class="animation"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="1s">
                            Section Two
                        </h4>
                        <p 
                            class="animation"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="1s">
                            For everything there is a season,and a time for every matter under heaven.
                        </p>
                    </div> 
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="home-con">
                    <img class="slide-bg" :src="bg03"> 
                    <div class="home-txt flex align-c flex-v">
                        <h4
                            class="animation"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="1s">
                            Section Three
                        </h4>
                        <p 
                            class="animation"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="1s">
                            For everything there is a season,and a time for every matter under heaven.
                        </p>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<style lang="scss">
</style>